<template>
	<div id="mine">
		<mainHeader></mainHeader>
		<div class="mine_wrap">
			<div class="mi_main">
				<el-row>
					<el-col class="mi_nav" :span="6">
						<div class="nav_cont">
							<img class="man" src="../../public/images/man.png">
							<p>
								<router-link :class="{ 'active':$route.path=='/mine/personal' }" :to="{ path: '/mine/personal'}">
								<i class="iconfont">&#xe608;</i>个人信息<span>Personal information</span>
								</router-link>
								<router-link :class="{ 'active':$route.path=='/mine/platform' }" :to="{ path: '/mine/platform'}">
								<i class="iconfont">&#xe609;</i>平台消息<em>5</em><span>Platform message</span>
								</router-link>
								<router-link :class="{ 'active':$route.path=='/mine/collection' }" :to="{ path: '/mine/collection'}">
								<i class="iconfont">&#xe60a;</i>我的收藏<span>My collection</span>
								</router-link>
							</p>
						</div>
						<img class="img" src="../../public/images/mine_img.png">
					</el-col>
					<el-col :span="18">
						<div class="mi_right">
							<template v-if="type==='personal'" >
								<personalNav></personalNav>
							</template>
							<template v-else-if="type==='platform'" >
								<platformNav></platformNav>
							</template>
							<template v-else >
								<collectionNav></collectionNav>
							</template>
							<!--<personalNav></personalNav>-->
							<!--<platformNav></platformNav>-->
							<!--<collectionNav></collectionNav>-->
						</div>
					</el-col>
				</el-row>
			</div>
		</div>
		<mainFooter></mainFooter>
	</div>
</template>

<script>
	import * as head from "../main/main";
	import * as modue from "./module/main";
    import { mapActions } from 'vuex' //在个人中心调用vuex的actions
	export default {
		name: "mine",
		components: {
			mainHeader:head.header,
            mainFooter:head.footer,
            personalNav: modue.personal,
            platformNav: modue.platform,
            collectionNav: modue.collection,
		},
		computed:{
           type() {
               return this.$route.params.type;
		   }
		},

        methods: mapActions([
            'changeType'
        ]),

		created() {
            this.$store.dispatch('changeType',1).then(() => {
              //  this.$router.push('/form/login');
            	if(localStorage.slug==''){
            		this.$router.push('/form/login');
            	}
             //   url:localStorage.slug == '' ? '/form/login' : '../mine/personal' //判断登陆后存储的用户凭证是否存在 这里是简单的验证

			}); //修改state.type为1
		}

        /*beforeRouteEnter (to, from, next) {
            //用个人中心让你熟悉这个钩子函数
            if (localStorage.slug) { //如果登陆了 不做处理
                next({
                    path:'/mine/personal', //定义type为1的是强制跳转
                    query: { type: 1 } //这个我不知道是干啥的 字义上理解是重定向:当前url
                })
            } else {
                next({
                    path:'/form/login', //定义type为1的是强制跳转
                    query: { type: 1 } //这个我不知道是干啥的 字义上理解是重定向:当前url
                })
            }
        }*/
	}
</script>
<style scoped lang="less" rel="stylesheet/less" type="text/css">
	@import '../../public/css/variable.less';	
	.mine_wrap{
		background: #f5f5f5;
	}
	.mi_main{
		width: 1200px;
		margin: 0 auto;
		padding: 50px 0;
	}
	.mi_nav{
		.nav_cont{
			background: @cw;
			.bdr(5px);
			.fonts(16px);
			padding: 50px 0 0;
		}
		.man{
			display: block;
			width: 116px;
			height: 116px;
			padding: 3px;
			border: 1px solid #d8b26a;
			.bdr(50%);
			margin: 0 auto 25px;
			.bdr(50%)
		}
		p{
			background: @cw;
		}
		a{
			display: block;
			.trans(0.3s);
			cursor: pointer;
			padding: 20px 0 20px 50px;
			border-bottom: 1px solid #f7f7f7;
			box-sizing: border-box;
			color: #5d5f63;
			border-left: 2px solid transparent;
			i{
				float: left;
				color: #bbb;
				.fonts(50px);
				padding-right: 25px;
				display: inline-block;
				margin-top: -5px;
				.trans(0.3s);
			}
			span{
				display: block;
				.fonts(12px);
				color: #909096;
				padding-top: 5px;
				.trans(0.3s);
			}
			em{
				display: inline-block;
				margin-left: 5px;
				padding: 0 10px;
				.fonts(12px);
				.bdr(10px);
				color: @cw;
				background: @cgolden;
			}
			&:last-child{
				border-top: 1px solid #f7f7f7;
			}
			&.active,&:hover{
				border-left-color: @cgolden;
				color: @cgolden;
				i,span{ color: @cgolden; }
			}
		}
		.img{
			display: block;
			width: 100%;
			.bdr(5px);
			margin: 15px 0;
		}
	}
	
	.el-col-18{
		padding-left: 15px;
		box-sizing: border-box;
	}
</style>